import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: CompositedExample()));
}

class CompositedExample extends StatefulWidget {
  const CompositedExample({super.key});

  @override
  State<CompositedExample> createState() => _CompositedExampleState();
}

class _CompositedExampleState extends State<CompositedExample> {
  // 用于控制 Overlay 中跟随者的显示与否
  final LayerLink _layerLink = LayerLink();
  bool _showOverlay = false;

  // 在 Overlay 中构建跟随者组件
OverlayEntry? _createFollowerOverlay() {
  return OverlayEntry(
    builder: (context) {
      return CompositedTransformFollower(
        link: _layerLink,
        // showWhenUnlinked: false, // 如果目标不可见（已卸载），则不显示跟随者
        offset: const Offset(0, 50), // 在目标位置基础上再偏移 (0, 50) 像素
        child: Material(
          elevation: 4,
          borderRadius: BorderRadius.circular(6),
          child: Padding(
            padding: const EdgeInsets.all(12.0),
            child: ConstrainedBox(
              constraints: const BoxConstraints(maxWidth: 200),
              child: const Text(
                '这是一个使用 CompositedTransformFollower 实现的自定义提示框！它可以精确地锚定在目标按钮下方。',
                style: TextStyle(color: Colors.black87),
              ),
            ),
          ),
        ),
      );
    },
  );
}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('CompositedTransform 示例')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 1. 这是我们的“目标”组件，它用 CompositedTransformTarget 包裹
            //    并提供与 follower 相同的 LayerLink。
            CompositedTransformTarget(
              link: _layerLink,
              child: ElevatedButton(
                onPressed: () {
                  setState(() {
                    _showOverlay = !_showOverlay;
                    // 根据状态添加或移除 Overlay
                    if (_showOverlay) {
                      // 获取 OverlayState 并插入我们的 follower
                      Overlay.of(context).insert(_createFollowerOverlay()!);
                    } else {
                      // 移除 Overlay，这里需要更复杂的状态管理来跟踪 entry
                      // 为了示例简单，我们只是切换状态。
                      // 在实际应用中，你需要保存 OverlayEntry 的引用并将其移除。
                      Overlay.of(context).rearrange([]); // 这不是正确的做法，仅用于演示
                      // 正确做法通常是使用一个变量来保存 OverlayEntry 并调用 .remove()
                    }
                  });
                },
                child: Text(_showOverlay ? '隐藏提示' : '显示提示'),
              ),
            ),
            const SizedBox(height: 100),
            const Text('滚动一下页面，看看提示框是否仍然跟随按钮！'),
          ],
        ),
      ),
    );
  }
}